<template>
  <div class="stroll">
    <nav>
      <van-search v-model="value" shape="round" background="#09BB07" show-action placeholder="请输入搜索关键词"
        @search="onSearch" @cancel="onCancel" @clear="reset()" />
    </nav>
    <header class="stroll_header">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <van-image fit="cover" width="100%" height="150px" :src="swiper1Src" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image fit="cover" width="100%" height="150px" :src="swiper2Src" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image fit="cover" width="100%" height="150px" :src="swiper3Src" />
        </van-swipe-item>
      </van-swipe>
    </header>
    <main class="stroll_main">
      <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab v-for="item in tabs" :title="item?.label" :key="item?.value">
          <section class="tab">
            <section class="tab_content" v-for="item in dataSource" :key="item?.id" @click="handleLookDetail(item)">
              <van-image fit="cover" width="100%" height="140px" :src="item?.cover" />
              <section class="tab_content_title van-ellipsis">{{ item?.title }}</section>
              <section class="tab_content_info">
                <section class="tab_content_info_user">
                  <img class="tab_content_info_user_avatar" :src="item?.avatar" alt="avatar" />
                  <span class="tab_content_info_user_name">用户名</span>
                </section>
                <section class="tab_content_info_action">
                  <van-icon style="color: #ff0000;" :name="item?.liked ? 'good-job' : 'good-job-o'" @click.stop="handleLike(item)" />
                  <van-icon style="color: #ffd700;" :name="item?.collected ? 'like' : 'like-o'" @click.stop="handleCollect(item)" />
                </section>
              </section>
            </section>
          </section>
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRouter } from "vue-router";
import { getPlateLabel } from '@/apis/plate';
import swiper1Src from '@/assets/swiper1.jpeg';
import swiper2Src from '@/assets/swiper2.jpg';
import swiper3Src from '@/assets/swiper3.jpg';
import { getPostList } from '@/apis/post';
import { addCollect, cancelCollect } from '@/apis/collect';
import { addLike, cancelLike } from '@/apis/like';

const router = useRouter();

const tabs = ref([]);
const active = ref(0);
const plateId = ref(0);

const dataSource = ref([]);
const value = ref('')


const onClickTab = ({ title }) => {
  const element = tabs.value.find(item => item.label === title);
  if (element) {
    plateId.value = element.value;
  }
}
const onCancel = () => {
  value.value = '';
  reset();
}

const reset = async () => {
  try {
    const { data = {} } = await getPostList({
      pageNum: 1,
      pageSize: 9999,
      status: 2,
      plateId: plateId.value
    });
    dataSource.value = data?.list;
  } catch (error) {
    console.log(error, 'reset-error');

  }
}
const onSearch = async (value) => {
  try {
    const { data = {} } = await getPostList({
      pageNum: 1,
      pageSize: 9999,
      title: value,
      status: 2,
      plateId: plateId.value
    });
    dataSource.value = data?.list;
  } catch (error) {
    console.log(error, 'search-error');

  }
}
const init = async () => {
  try {
    const res = await getPlateLabel();
    tabs.value = res?.data || [];
    plateId.value = res?.data?.[0]?.value;

  } catch (error) {
    console.log(error, 'get-plate-error');

  }
};


const handleCollect = async (item) => {
  try {
    plateId.value = null;
    if (!item?.collected) {

      const res = await addCollect({
        postId: item.id
      });
      if (res?.code === 200) {
        plateId.value = item?.plateId;

      }
      return;
    }
    const res = await cancelCollect(item.id);
    if (res?.code === 200) {
      plateId.value = item?.plateId;

    }
  } catch (error) {
    console.log(error, 'handle-like-error');

  }
}


const handleLike = async (item) => {
  try {
    plateId.value = null;
    if (!item?.liked) {

      const res = await addLike({
        postId: item.id
      });
      if (res?.code === 200) {
        plateId.value = item?.plateId;

      }
      return;
    }
    const res = await cancelLike(item.id);
    if (res?.code === 200) {
      plateId.value = item?.plateId;

    }
  } catch (error) {
    console.log(error, 'handle-like-error');

  }
}

const handleLookDetail = (item) => {
  router.push(`/post/detail/${item?.id}`);
};

watch(plateId, async (newVal) => {
  if (!newVal) {
    return;
  }
  try {
    const res = await getPostList({
      plateId: newVal,
      status: 2
    });
    dataSource.value = res?.data?.list || [];
  } catch (error) {
    console.log(error, 'get-post-list-error');

  }

})
onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
.stroll {
  &_header {
    margin-top: 8px;
  }

  &_main {
    margin-top: 8px;
  }
}

.tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 8px;

  &_content {
    margin-top: 8px;
    height: 220px;
    background-color: #fff;
    width: 48%;
    border-radius: 12px;
    box-sizing: border-box;
    padding: 8px;

    &_title {
      font-size: 14px;
      color: #333;
    }

    &_info {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;

      &_user {
        width: 50%;
        display: flex;
        align-items: center;

        &_avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }

        &_name {
          font-size: 12px;
          color: #666;
          margin-left: 8px;
        }
      }

      &_action {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
  }
}
</style>
